<!--商品信息列表-->
<template>
    <Modal :value="value" @input="handleInput" width="746" class="col-2" :closable="false">
        <div slot="header" >
            商品信息列表
            <Icon class="f-fr" type="ios-close" @click="cancelModal"/>
        </div>
        <Form class="clearfix" :label-width="88" @submit.native.prevent inline>
            <FormItem label="商品编码" class="search-btn-box">
                <Input
                    v-model="searchData.keyWord"
                    type="text"
                    ref="input"
                    @on-enter="searchBtnClick"
                    @on-focus="isFocus = true"
                    @on-blur="isFocus = false"
                    placeholder="请输入商品名称"
                ></Input>
            </FormItem>
            <FormItem class="class=&quot;search-btn-box">
                <Button class="icon-btn" type="primary" @click="searchBtnClick">
                    查询
                </Button>
            </FormItem>
        </Form>
        <div class="content-body">
            <Table highlight-row :columns="goodsColumns" :data="goodsList"></Table>
        </div>
        <div class="content-footer" style="float: right">
            <Page
                @on-change="goodsPageNum"
                @on-page-size-change="goodsPageSize"
                :page-size="searchData.pageSize"
                :current="searchData.pageNum"
                :transfer="true"
                :total="goodsTotal"
                show-total
                show-sizer
                show-elevator
            />
        </div>
        <div slot="footer">
            <Button type="default" @click="cancelModal">取消</Button>
            <Button type="primary" @click="saveCustId">确定</Button>
        </div>
    </Modal>
</template>

<script>
import { getGoodsListInfo } from '@/api/declare'
import { on, off } from '@/libs/tools'

export default {
    name: 'GoodsInfoModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        goodsInfo: {
            default: function () {
                return {
                    code: ''
                }
            },
            type: Object
        }
    },
    data () {
        return {
            searchData: {
                keyWord: '',
                pageSize: 10,
                pageNum: 1

            },
            goodsTotal: 0,
            goodsList: [],
            goodsColumns: [
                {
                    title: '单选',
                    key: 'checkBox',
                    width: 80,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Checkbox', {
                                props: {
                                    value: params.row.checkBox
                                },
                                on: {
                                    'on-change': (e) => {
                                        const checked = this.goodsList.findIndex(item => item.checkBox)
                                        if (checked >= 0 && params.index !== checked) {
                                            this.goodsList[checked].checkBox = false
                                        };
                                        this.goodsList[params.index].checkBox = !this.goodsList[params.index].checkBox
                                    }
                                }
                            })
                        ])
                    }
                },
                {
                    title: '商品编号',
                    key: 'codeTs',
                    width: 220
                },
                {
                    title: '商品名称',
                    key: 'goodsName',
                    width: 220,
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%',
                                    whiteSpace: 'normal'
                                }
                            }, params.row.goodsName)
                        ])
                    }
                },
                {
                    title: '备注',
                    key: 'remark',
                    width: 210
                }
            ],
            isFocus: false
        }
    },
    created () {
        this.init(this.goodsInfo.code)
    },
    methods: {
        init (code) {
            this.searchData.keyWord = code
            this.searchHandle(this.searchData)
            this.$nextTick(() => {
                this.$refs.input.focus()
                on(window, 'keydown', this.handleKeyboardEvent)
                on(window, 'keyup', this.handleKeyboardEvent)
            })
        },

        searchHandle (searchData) {
            getGoodsListInfo(searchData).then(res => {
                if (res.data.code === '0000') {
                    res.data.data.list.forEach((item, index) => {
                        item.checkBox = index === 0
                    })
                    this.goodsList = res.data.data.list
                    this.goodsTotal = res.data.data.total
                    if (this.goodsList.length) {
                        this.$refs.input.blur()
                    } else {
                        this.$refs.input.focus()
                    }
                }
            })
        },

        searchBtnClick () {
            this.searchHandle(this.searchData)
        },

        cancelModal () {
            off(window, 'keydown', this.handleKeyboardEvent)
            off(window, 'keyup', this.handleKeyboardEvent)
            this.handleInput(false)
        },
        handleInput (v) {
            this.$emit('input', v)
        },

        saveCustId () {
            let isHasChecked = false
            let resData = {
                selectedData: {}
            }

            if (this.goodsList.length > 0) {
                this.goodsList.forEach(item => {
                    if (item.checkBox) {
                        resData.selectedData = item
                        isHasChecked = true
                    }
                })

                if (!isHasChecked) {
                    this.$Message.warning('请勾选商品信息')
                    return false
                }
            }
            this.$emit('saveCustId', resData)
            this.cancelModal()
        },

        goodsPageNum (pageNum) {
            this.searchData.pageNum = pageNum
            this.searchHandle(this.searchData)
        },

        goodsPageSize (pageSize) {
            this.searchData.pageSize = pageSize
            this.searchHandle(this.searchData)
        },
        getCheckIndex () {
            return this.goodsList.findIndex(item => item.checkBox)
        },
        handleKeyboardEvent (event) {
            if (!this.searchData.keyWord || this.isFocus) return
            const keyCode = event.keyCode
            if (event.type === 'keyup') {
                if (keyCode === 13) {
                    this.saveCustId()
                }
            } else {
                switch (keyCode) {
                    // 上键 38
                    case 38:
                        event.preventDefault()
                        let index = this.getCheckIndex()
                        if (index > 0) {
                            this.goodsList[index].checkBox = false
                            this.goodsList[index - 1].checkBox = true
                        }
                        break
                        // 下键 40
                    case 40:
                        event.preventDefault()
                        const j = this.getCheckIndex()
                        if (j > -1 && j < this.goodsList.length - 1) {
                            this.goodsList[j].checkBox = false
                            this.goodsList[j + 1].checkBox = true
                        }
                        break
                }
            }
        }
    },
    beforeDestroy () {
        off(window, 'keydown', this.handleKeyboardEvent)
        off(window, 'keyup', this.handleKeyboardEvent)
    }
}
</script>
